<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <van-cell title="品鉴卡二维码存放位置：会员中心 >> 免费品鉴卡" />
    <div class="img_outer">
      <van-image width="90%" height="16rem" fit="contain" :src="qrcode_image">
        <template v-slot:loading>
          <van-icon name="qr-invalid" size="5rem" />
        </template>
      </van-image>
    </div>
    <van-notice-bar
      scrollable
      text="请持有此二维码到下面的商家列表免费领取一瓶黄山功夫原浆枸杞啤酒"
    />
    <van-collapse v-model="activeNames">
      <van-collapse-item title="品鉴卡" name="1">
        <div class="img_outer" v-if="card.image">
          <van-image width="100%" height="240" :src="card.image" />
        </div>
        <van-cell :title="card.name" :label="card.comment" />
        <van-cell title="开始时间" :value="card.begin_date" />
        <van-cell title="结束时间" :value="card.end_date" />
      </van-collapse-item>
      <van-collapse-item title="商家列表" name="2">
        <van-cell
          icon="shop-o"
          v-for="item in retailers"
          :key="item.id"
          :title="item.name"
          :label="item.address"
        />
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
import NavBar from "@/components/NavBar";
import { getWxSampleCardBykey, getWxCardById } from "@/api/card";
import { getWxRetailerList } from "@/api/member";
import { Base64 } from "js-base64";
import { show_qrcode } from "@/api/wechat";

export default {
  name: "SampleCard",
  components: {
    NavBar,
  },

  computed: {},

  props: ["sample_key"],

  data() {
    return {
      title: this.$route.meta.title,

      openid: localStorage.getItem("openid"),

      card: {
        name: "",
        comment: "",
        begin_date: null,
        end_date: null,
        image: null,
      },
      retailers: [],
      sample: {},
      activeNames: ["2"],
      qrcode_image: null,
    };
  },

  created() {
    this.getSampleCardInfo();
    this.getQrCode();
    this.getRetailers();
  },

  methods: {
    getSampleCardInfo() {
      getWxSampleCardBykey(this.sample_key)
        .then((res) => {
          this.sample = res.data;
          getWxCardById(res.data.card).then((resp) => {
            this.card = resp.data;
          });
        })
        .catch((error) => {
          this.$notify({ type: "danger", message: "读取数据失败" + error });
        });
    },

    getRetailers() {
      getWxRetailerList().then((res) => {
        this.retailers = res.data;
      });
    },

    getQrCode() {
      const pid = localStorage.getItem("openid");
      const base64_pid = Base64.encode(pid);
      const url = `http://${window.location.host}/#/csample_confirm/${this.sample_key}/?pid=${base64_pid}`;
      const params = {
        url: url,
      };
      show_qrcode(params)
        .then((res) => {
          return (
            "data:image/png;base64," +
            btoa(
              new Uint8Array(res.data).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ""
              )
            )
          );
        })
        .then((data) => {
          this.qrcode_image = data;
        });
    },
  },
};
</script>

<style  scoped>
.img_outer {
  margin: 20px;
  margin-top: 5px;
  display: flex;
  justify-content: center;
}
.title {
  text-align: center;
  margin: 0;
}
.points {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background-color: #f2f3f5;
}
.van-field__label {
  color: black;
}
.van-col {
  margin: 5px;
  padding: 0px;
}
</style>